<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-input v-model="goodsId" placeholder="请输入商品编码" clearable style="width: 98%" @keyup.enter.native="getGoodsInfo" />
      </el-col>
      <el-col :span="12">
        <el-button plain type="primary" @click="getGoodsInfo">获取详情</el-button>
      </el-col>
    </el-row>
    <el-form ref="form" v-if="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品编码: " style="margin: 2px">{{form.goodsId}}</el-form-item>
          <el-form-item label="商品型号: " style="margin: 2px">{{form.goodsName == null ? "" : form.goodsName}}</el-form-item>
          <el-form-item label="验机人: " style="margin: 2px">{{form.testName == null ? "" : form.testName}}</el-form-item>
          <el-form-item label="供应商: " style="margin: 2px" v-if="form.storeCollect">{{form.storeCollect == null ? "" : form.storeCollect.companyInfo}}</el-form-item>
          <el-form-item label="供应商: " style="margin: 2px" v-else>{{form.supplierName == null ? "" : form.supplierName}}</el-form-item>
          <el-form-item label="回收金额: " style="margin: 2px">
            <span style="font-weight: bold;font-size: 24px;color: red">
                {{form.costPrice == null ? "" : form.costPrice}} 元
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="串号: " style="margin: 2px">{{form.goodsSn == null ? "" : form.goodsSn}}</el-form-item>
          <el-form-item label="规格: " style="margin: 2px">{{form.printing == null ? "" : form.printing}}</el-form-item>
          <el-form-item label="报价师: " style="margin: 2px">{{form.storeCollect == null ? "" : offerNameFormat(form.storeCollect)}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注: " style="margin: 2px">
            <el-input v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="验机报告: " style="margin: 2px">
            <el-input type="textarea" v-model="form.testInfo" placeholder="请输入验机报告" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form :model="submitForm" v-if="form" label-width="80px">
      <el-form-item label="回收金额: ">
        <el-input-number v-model="submitForm.costPrice" :min="0" />
      </el-form-item>
      <el-form-item label="预售金额: ">
        <div v-for="(item, key) in submitForm.salePriceList" style="margin-bottom: 5px">
          <el-select v-model="item.platform" placeholder="请选择">
            <el-option v-show="validOptions(dict.dictValue)" v-for="dict in salePriceOptions" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
          <el-input-number v-model="item.price" style="margin-left: 5px;margin-right: 5px" />
          <el-button @click="handleDeletePrice(item,key)" icon="el-icon-delete" circle type="danger" plain></el-button>
        </div>
        <el-button icon="el-icon-plus" plain circle type="success" @click="handleAddPrice"></el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="form">
      <el-button type="primary" @click="submitFormBtn">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {addGoodsRecord, getGoodsNormal, quotationUpdateGoods} from "@/api/recovery/goods";
import {listPriceLog, delPriceLog} from "@/api/recovery/priceLog";
import {listUser} from "@/api/system/user";

export default {
  name: "Quotation",
  data(){
    return {
      offerNameOptions: [],
      salePriceOptions: [],
      goodsId: undefined,
      // 表单参数
      form: undefined,
      submitForm: {
        costPrice: 0, //回收金额
        salePriceList: [
          {
            platform:undefined,
            price: 0
          }
        ]
      }
    }
  },
  created() {
    this.getDicts("sale_price_log_platform").then(response => {
      this.salePriceOptions = response.data;
    });
    listUser({roleKey:'quote'}).then(res => {
      this.offerNameOptions = res.rows;
    })
  },
  methods: {
    // 报价师字典翻译
    offerNameFormat(row) {
      let str = "";
      this.offerNameOptions.forEach(item => {
        if(item.userId === Number(row.offerName))
          str = item.nickName;
      })
      return str;
    },
    /*获取预售列表*/
    getSalePriceList() {
      const queryParams = {
        goodsId: this.goodsId,
        status: 1
      }
      listPriceLog(queryParams).then(response => {
        this.submitForm.salePriceList = [];
        response.rows.forEach(item => {
          let data = {
            platform:String(item.platform),
            price: item.price,
            id: item.id
          }
          this.submitForm.salePriceList.push(data);
        })
      });
    },
    /** 提交按钮 */
    submitFormBtn() {
      if(!this.form) {
        this.msgWarning("不可提交");
        return
      }
      if(!this.submitForm.costPrice) {
        this.msgWarning("成本价不能为空");
        return
      }

      this.form.costPrice = this.submitForm.costPrice;
      this.form.salePriceList = this.submitForm.salePriceList;
      quotationUpdateGoods(this.form).then(response => {
        this.msgSuccess("操作成功！");
        this.cancel();
      });
    },
    // 取消按钮
    cancel() {
      this.goodsId = undefined;
      this.form = undefined;
      this.submitForm = {
        costPrice: 0, //回收金额
        salePriceList: [
          {
            platform:undefined,
            price: 0
          }
        ]
      }
      this.$emit("submitRefresh");
    },
    /*验证选项是否被选中*/
    validOptions(val) {
      for(let i = 0; i < this.submitForm.salePriceList.length; i++) {
        if(this.submitForm.salePriceList[i].platform === val)
          return false;
      }
      return true;
    },
    /*新增预售报价*/
    handleAddPrice() {
      if(this.submitForm.salePriceList.length >= this.salePriceOptions.length){
        this.msgWarning("超出数量");
        return
      }
      this.submitForm.salePriceList.push({
        platform: undefined,
        price: 0
      })
    },
    /*删除预售价*/
    handleDeletePrice(item, key) {
      if(item.id) {
        delPriceLog(item.id).then(res => {
          this.submitForm.salePriceList.splice(key, 1);
        })
      }else {
        this.submitForm.salePriceList.splice(key, 1);
      }
    },
    getGoodsInfo() {
      if(!this.goodsId){
        this.msgWarning("请输入商品编码！");
        return
      }
      getGoodsNormal(this.goodsId).then(response => {
        this.form = response.data;
        this.submitForm.costPrice = this.form.costPrice;
        this.msgSuccess("数据导入成功，请进行报价操作!");
        //新增日志
        addGoodsRecord(2, this.form.goodsId).then(res => {
          this.form.recordId = res.data.id;
        })
      });
      this.getSalePriceList();
    },
    testTran(val) {
      if(!val)
        return "";
      let arr = val.split(",");
      let res = "";
      arr.forEach(it => {
        res += "[ " + it + " ] - ";
      })
      return res.substring(0, res.length - 2);
    }
  }
}
</script>

<style scoped lang="scss">
  .dialog-footer {
    margin: 30px;
    text-align: center;
  }
</style>
